<template>
  <view class="search" :class="{focused:isSearch}">
    <view class="sinput">
       <!-- v-model="keyWord" @input="searchPrd" -->
      <input v-model="keyWord" @confirm="goResult" @input="searchPrd" @focus="search" type="text" placeholder="搜索" />
      <button @click="cancel">取消</button>
    </view>
    <view class="scontent" v-show="isSearch">
      <div class="title">
        搜索历史
        <span @click="clearHistory" class="clear"></span>
      </div>
      <div class="history" v-if="result.length===0">
        <navigator v-for="key in history" :key="key" :url="`/packone/list/index?query=`+key">{{key}}</navigator>
       
      </div>
      <!-- 结果 -->
      <scroll-view scroll-y v-else class="result" >
        <navigator :key="item.goods_id" v-for="item in result" url="/packone/goods/index">{{item.goods_name}}</navigator>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isSearch: false,
      // 建议 联想商品列表
      result:[],
      // 搜索关键词
      keyWord:'',
      // 定义搜索历史数据 =>确认搜索的时候=>保存当前搜索关键词
      // uni.getStorageSync('history') ||[], 获取本地关键词
      history:uni.getStorageSync('history') ||[],
    };
  }, 

  methods: {
    // 清除搜索历史记录
    clearHistory(){
     console.log(111);
      // 清除本地存储历史记录
     uni.removeStorage({
       key: 'history',
       success:()=>{
         // 页面数据删除
         this.history=[] 
      }
     });
    },
    // 搜索回车触发跳转到搜索结果页面
    goResult(){
     
      // 查询重复数据  判断数组中是否存在该数据
      if(!this.history.includes(this.keyWord)){
        // 如果不存在赋值数据
        this.history.push(this.keyWord)
      //  更新本地存储
      // 本地存储一份=>刷新页面=》还可以获取历史搜索记录
      uni.setStorage({
        key: 'history',
        data: this.history,
      });
      }
       //跳转到搜索结果页面
    //  路由跳转 动态绑定数据
      uni.navigateTo({
      url:`/packone/list/index?query=${this.keyWord}`
      })
    },
    // 搜索输入
   searchPrd(){
    //  console.log("11111111111");
    //  console.log(this.keyWord);
    // 函数防抖=》一定时间内只能执行最后一次
    // 定时时间内触发的都将被清除掉
    this.timer && clearTimeout(this.timer)
    this.timer = setTimeout(()=>{
        // 判断输入框如果为空 页面恢复初始化清除，历史建议商品列表
       if(!this.keyWord) {
         return this.result=[]
       }
       this.getSearchPrds(this.keyWord)
    },600)
    },
    // 获取建议商品数据
    async getSearchPrds(keyWord){
     const {msg ,data} =await this.request({url:'/goods/qsearch',data:{
       query:keyWord
     }})
     console.log( "输入框",msg,data);
     if(msg.status===200){
       this.result=data
     }
    },
    search() {
      this.isSearch = true;
      const pageHeight = uni.getSystemInfoSync().windowHeight + "px";
      uni.hideTabBar();
      this.$emit("search", pageHeight);
    },
    cancel() {
      this.isSearch = false;
      uni.showTabBar();
      this.$emit("search", "auto");
    }
  }
};
</script>

<style lang="scss">
// 搜索
.search {
  display: flex;
  flex-direction: column;
  .sinput {
    box-sizing: border-box;
    padding: 20rpx 16rpx;
    background: #ff2d4a;
    position: relative;
    //伪元素
    &::after {
      position: absolute;
      top: 28rpx;
      left: 302rpx;
      content: "";
      width: 44rpx;
      height: 44rpx;
      line-height: 1;
      background-image: url(https://static.botue.com/ugo/images/icon_search%402x.png);
      background-size: 32rpx;
      background-position: 6rpx center;
      background-repeat: no-repeat;
    }
    input {
      background: #fff;
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      color: #bbb;
      border-radius: 5rpx;
    }
    button {
      display: none;
      margin-left: 20rpx;
      width: 150rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      border-radius: 5rpx;
      background: transparent;
      color: #666;
    }
  }
  &.focused {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    .sinput {
      display: flex;
      background: #eee;
      input {
        text-align: left;
        padding-left: 60rpx;
      }
      button {
        display: block;
      }
      &::after {
        left: 30rpx;
      }
    }
  }
  .scontent {
    background: #fff;
    position: relative;

    flex: 1;
    padding: 27rpx;
    .title {
      font-size: 27rpx;
      line-height: 1;
      color: #333;
    }
    .clear {
      display: block;
      width: 27rpx;
      height: 27rpx;
      float: right;
      background-image: url(http://static.botue.com/ugo/images/clear.png);
      background-size: cover;
    }

    .history {
      padding-top: 30rpx;
      navigator {
        display: inline-block;
        line-height: 1;
        padding: 15rpx 20rpx 12rpx;
        background-color: #ddd;
        font-size: 24rpx;
        margin-right: 20rpx;
        margin-bottom: 15rpx;
        color: #333;
      }
    }

    .result {
      // display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #fff;
      navigator {
        line-height: 1;
        padding: 20rpx 30rpx;
        font-size: 24rpx;
        color: #666;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>